# -*- coding:utf-8 -*-
import newspaper
from newspaper import Article
import unittest
from test.test_base import TestBase
import logging
import urllib3.request
from bs4 import BeautifulSoup
import json
class NewsPaperTest(unittest.TestCase, TestBase):
    def setUp(self):
        self.initLog('../../logger.ini')

        # url = 'http://www.cnblogs.com/onepixel/p/6034307.html'#可以读取正文
        #url = 'https://blog.coding.net/blog/what-is-canvas' #可以提取标题,未读取到内容
        #url = 'https://github.com/codelucas/newspaper/' #异常
        url = 'https://www.douban.com/note/326725538/' #可以读取正文
        #url = 'http://mp.weixin.qq.com/s?__biz=MjM5MDk5MzE2Mw%3D%3D&mid=2527294468&idx=1&sn=d35cfa44eb44c6b38fb1dcd38fa186d5&chksm=b5eb8a60829c0376f5e74219768bfad897e335af4fb727dde90ba47cb2282584f5e59f2d689a&mpshare=1&scene=1&srcid=1116Zr82InAZPI1Jr20jz4Dt'
        #url= 'https://zhuanlan.zhihu.com/p/24162642' #获取不到正文,因为源码中没有正文内容,通过异步加载的
        self.article = Article(url)
        self.article.download()

        self.article.parse()

    def testGetText(self):

        logging.debug('authors %s', self.article.authors)
        logging.debug('publish_date %s', self.article.publish_date)
        text = self.article.text
        print 'title:',self.article.title
        print'read text by newspaper :---', text
        #print'read text by beautifulSoup :---', self.readContent('http://mp.weixin.qq.com/s?__biz=MjM5MDk5MzE2Mw%3D%3D&mid=2527294468&idx=1&sn=d35cfa44eb44c6b38fb1dcd38fa186d5&chksm=b5eb8a60829c0376f5e74219768bfad897e335af4fb727dde90ba47cb2282584f5e59f2d689a&mpshare=1&scene=1&srcid=1116Zr82InAZPI1Jr20jz4Dt')



    # def testGetKeyWord(self):
    #     self.article.nlp()
    #     print 'keyword', self.article.keywords
    #     print 'summary', self.article.title + '.' + self.article.summary

    # def testGetArticleByDomain(self):
    #     cnn_paper = newspaper.build('http://www.cnblogs.com/pick/')
    #     for article in cnn_paper.articles:
    #         print 'url---', article.url

    def readContent(self, url):
        try:
            http = urllib3.PoolManager()
            response = http.request('GET', url)
            str = response.data.decode("utf-8")
            soup = BeautifulSoup(str)
            return soup.get_text()
        except Exception:
            logging.debug('read url content failed %s', url)
            return ''


if __name__ == '__main__':
    # newsPaper = NewsPaperTest("testGetKeyWord")
    a = json.dumps({"isTitleImageFullScreen": false, "rating": "none", "titleImage": "https://pic2.zhimg.com/v2-9d86e6444f7001ffbf538b8ddb6f7f95_r.png", "links": {"comments": "/api/posts/24162642/comments"}, "reviewers": [], "topics": [{"url": "https://www.zhihu.com/topic/19550901", "id": "19550901", "name": "\u524d\u7aef\u5f00\u53d1"}, {"url": "https://www.zhihu.com/topic/19551326", "id": "19551326", "name": "CSS"}, {"url": "https://www.zhihu.com/topic/19552521", "id": "19552521", "name": "JavaScript"}], "titleImageSize": {"width": 0, "height": 0}, "href": "/api/posts/24162642", "collapsedCount": 0, "excerptTitle": "", "author": {"bio": "\u7f16\u7a0b\u5b66\u4e60\u5206\u4eab\u8005\uff0c\u4e13\u6ce8\u524d\u7aef\u3002", "hash": "378ab035ef835f51e537548d6b73900f", "uid": 784321885851762688, "isOrg": false, "slug": "itlion114", "description": "\u7f16\u7a0b\u5b66\u4e60\u5206\u4eab\u8005\uff0c\u4e13\u6ce8\u524d\u7aef\u3002", "name": "IT\u7a0b\u5e8f\u72ee", "profileUrl": "https://www.zhihu.com/people/itlion114", "avatar": {"id": "v2-3bdbf34128d395dd4e1ebe21a56578cd", "template": "https://pic2.zhimg.com/{id}_{size}.jpg"}, "isOrgWhiteList": false, "badge": {"identity": null, "best_answerer": null}}, "column": {"slug": "itlion114", "name": "IT\u6280\u672f\u5206\u4eab"}, "tipjarState": "activated", "content": "<p>\u5728\u5341\u4e00\u6708\u4efd\u7684\u524d\u7aef\u6280\u672f\u5217\u8868\u4e2d\uff0c\u6211\u4eec\u6574\u5408\u4e86\u4e00\u4e9b\u4ee4\u4eba\u611f\u5230\u60ca\u53f9\u7684 GitHub \u9879\u76ee\uff0c\u5176\u4e2d\u5305\u542b\u4e86\u65b0\u7684 CSS \u6846\u67b6\u3001node.js\u5305\u7ba1\u7406\u5668\uff0c\u4ee5\u53ca\u7528\u4e8e\u5b9e\u73b0\u56fe\u6807\u3001\u52a0\u8f7d\u6548\u679c\u3001\u5de5\u5177\u63d0\u793a\u7684\u7eaf CSS \u89e3\u51b3\u65b9\u6848\u3002</p><p>\u90a3\u4e48\uff0c\u8ba9\u6211\u4eec\u4e00\u8d77\u6765\u770b\u770b\u5427\u3002Have Fun \uff01</p><h2><b>1. <a href=\"https://link.zhihu.com/?target=https%3A//github.com/KingPixil/wing/\" class=\" wrap external\" target=\"_blank\" rel=\"nofollow noreferrer\">Wing<i class=\"icon-external\"></i></a></b></h2><img src=\"https://pic1.zhimg.com/v2-7a0efae26767a693af95a203b2b8fef0_b.jpg\" data-rawwidth=\"785\" data-rawheight=\"370\" class=\"origin_image zh-lightbox-thumb\" width=\"785\" data-original=\"https://pic1.zhimg.com/v2-7a0efae26767a693af95a203b2b8fef0_r.jpg\"><p>Wing \u662f\u4e00\u4e2a\u5fae\u578b\uff08\u538b\u7f29\u540e\u4ec5\u67094KB\uff09\u54cd\u5e94\u5f0f\u7684 CSS \u6846\u67b6\uff0c\u5b83\u63d0\u4f9b\u4e86\u4e00\u4e2a 12 \u5217\u54cd\u5e94\u5f0f\u7f51\u683c\u4ee5\u53ca\u57fa\u7840\u7684\u6837\u5f0f\u7ec4\u4ef6\u96c6\uff0c\u53ef\u4e3a\u4f60\u7684\u5efa\u7ad9\u5de5\u4f5c\u6253\u4e0b\u575a\u5b9e\u7684\u57fa\u7840\u3002\u5f53\u7136\uff0c\u8fd9\u4e2a\u9879\u76ee\u6700\u9177\u7684\u5730\u65b9\u5728\u4e8e\uff0c\u5b83\u7edd\u5927\u591a\u6570\u7684 HTML \u5143\u7d20\u90fd\u662f\u81ea\u52a8\u6837\u5f0f\u5316\u7684\uff0c\u800c\u4e0d\u9700\u8981\u4efb\u4f55\u989d\u5916\u7684\u7c7b\u3002\u5e0c\u671b\u4f60\u4f1a\u559c\u6b22\uff01</p><blockquote><p><b>HERE\uff1a<a href=\"https://link.zhihu.com/?target=https%3A//github.com/KingPixil/wing/\" class=\" wrap external\" target=\"_blank\" rel=\"nofollow noreferrer\">Wing \u9879\u76ee\u5730\u5740<i class=\"icon-external\"></i></a></b></p></blockquote><h2><b>2. <a href=\"https://link.zhihu.com/?target=https%3A//dollarshaveclub.github.io/shave/\" class=\" wrap external\" target=\"_blank\" rel=\"nofollow noreferrer\">Shave<i class=\"icon-external\"></i></a></b></h2><img src=\"https://pic2.zhimg.com/v2-4bd11f83007b46dcc5e4a4b3ab2eb7e5_b.png\" data-rawwidth=\"1275\" data-rawheight=\"351\" class=\"origin_image zh-lightbox-thumb\" width=\"1275\" data-original=\"https://pic2.zhimg.com/v2-4bd11f83007b46dcc5e4a4b3ab2eb7e5_r.png\">Shave \u662f\u4e00\u4e2a\u96f6\u4f9d\u8d56\u3001\u8f7b\u91cf\u7ea7\u7684 JavaScript \u63d2\u4ef6\uff0c\u5b83\u80fd\u622a\u65ad\u591a\u884c\u6587\u672c\uff0c\u4ee5\u9002\u5e94\u57fa\u4e8e max-height \u8bbe\u5b9a\u597d\u7684 html \u5143\u7d20\uff0c\u5e76\u5c06\u539f\u59cb\u6587\u672c\u5b57\u7b26\u4e32\u5b58\u50a8\u5728\u9690\u85cf\u7684<b>&lt;span&gt;</b>\u5143\u7d20\u4e2d\uff0c\u4ee5\u4fbf\u4f60\u7684\u6587\u672c\u80fd\u591f\u5b8c\u6574\u5730\u4fdd\u7559\u5728\u9875\u9762\u4e2d\u3002Shave \u4e0d\u4f9d\u8d56\u4efb\u4f55\u5e93\uff0c\u540c\u65f6\u5b83\u5728 jQuery \u4e2d\u63d0\u4f9b\u4e86\u4e00\u4e2a\u72ec\u7acb\u7248\u672c\u7684\u63d2\u4ef6\u3002<br><blockquote><p><strong>HERE\uff1a<a href=\"https://link.zhihu.com/?target=https%3A//dollarshaveclub.github.io/shave/\" class=\" wrap external\" target=\"_blank\" rel=\"nofollow noreferrer\">Shave \u9879\u76ee\u5730\u5740<i class=\"icon-external\"></i></a></strong></p></blockquote><h2><b>3. <a href=\"https://link.zhihu.com/?target=http%3A//www.cerebraljs.com/\" class=\" wrap external\" target=\"_blank\" rel=\"nofollow noreferrer\">Cerebral<i class=\"icon-external\"></i></a></b></h2><img src=\"https://pic1.zhimg.com/v2-61e12a517beff77f06ef381e9989bf64_b.jpg\" data-rawwidth=\"785\" data-rawheight=\"370\" class=\"origin_image zh-lightbox-thumb\" width=\"785\" data-original=\"https://pic1.zhimg.com/v2-61e12a517beff77f06ef381e9989bf64_r.jpg\">\u4e00\u4e2a JavaScript MVC \u5e94\u7528\u7a0b\u5e8f\u72b6\u6001\u7ba1\u7406\u5668\uff0c\u5e76\u4e14\u5b83\u6709\u72ec\u7acb\u7684\u8c03\u8bd5\u5668\u3002\u5728 Cerebral \u4e2d\uff0c\u5e94\u7528\u7a0b\u5e8f\u7684\u72b6\u6001\u88ab\u5b58\u50a8\u5728\u5355\u4e2a\u7684\u6811\u6a21\u578b\u4e2d\uff0c\u8be5\u6a21\u578b\u7ba1\u7406\u7740\u6240\u6709\u670d\u52a1\u5668\u7aef\u548c\u5ba2\u6237\u7aef\u7684\u72b6\u6001\u3002<br><p>\u800c\u8c03\u8bd5\u5668\u5177\u6709\u5bf9\u6a21\u578b\u3001\u63a7\u5236\u5668\u4ee5\u53ca\u89c6\u56fe\u7684\u5b9e\u65f6\u7ba1\u7406\u6743\u9650\u3002</p><blockquote><p><strong>HERE\uff1a<a href=\"https://link.zhihu.com/?target=http%3A//www.cerebraljs.com/\" class=\" wrap external\" target=\"_blank\" rel=\"nofollow noreferrer\">Cerebral \u9879\u76ee\u5730\u5740<i class=\"icon-external\"></i></a></strong></p></blockquote><h2><b>4. <a href=\"https://link.zhihu.com/?target=https%3A//tiaanduplessis.github.io/wenk/\" class=\" wrap external\" target=\"_blank\" rel=\"nofollow noreferrer\">Wenk<i class=\"icon-external\"></i></a></b></h2><img src=\"https://pic4.zhimg.com/v2-1acaed096418f580f10883f44ebb8573_b.png\" data-rawwidth=\"1103\" data-rawheight=\"247\" class=\"origin_image zh-lightbox-thumb\" width=\"1103\" data-original=\"https://pic4.zhimg.com/v2-1acaed096418f580f10883f44ebb8573_r.png\">Wenk \u662f\u4e00\u4e2a\u8f7b\u91cf\u7ea7\u7eaf CSS \u5199\u7684\u6587\u672c\u5de5\u5177\u63d0\u793a\u5e93\u3002\u867d\u7136\u5b83\u7684\u538b\u7f29\u7248\u4ec5\u6709700\u5b57\u8282\uff0c\u4f46\u5b83\u4f9d\u7136\u80fd\u591f\u7ba1\u7406\u5e76\u63d0\u4f9b\u4e00\u4e9b\u5b9a\u5236\u9009\u9879\u3002\u8bf8\u5982\u4e0d\u540c\u63d0\u793a\u5de5\u5177\u7684\u5927\u5c0f\u3001\u4f4d\u7f6e\u548c\u6587\u672c\u5bf9\u9f50\u3002<blockquote><p><strong>HERE\uff1a<a href=\"https://link.zhihu.com/?target=https%3A//tiaanduplessis.github.io/wenk/\" class=\" wrap external\" target=\"_blank\" rel=\"nofollow noreferrer\">Wenk \u9879\u76ee\u5730\u5740<i class=\"icon-external\"></i></a></strong></p></blockquote><h2><b>5. <a href=\"https://link.zhihu.com/?target=http%3A//www.raphaelfabeni.com.br/css-loader/\" class=\" wrap external\" target=\"_blank\" rel=\"nofollow noreferrer\">CSS Loader<i class=\"icon-external\"></i></a></b></h2><img src=\"https://pic1.zhimg.com/v2-4e27703570fd0a8dc557243e36366558_b.png\" data-rawwidth=\"785\" data-rawheight=\"370\" class=\"origin_image zh-lightbox-thumb\" width=\"785\" data-original=\"https://pic1.zhimg.com/v2-4e27703570fd0a8dc557243e36366558_r.png\">CSS Loader \u662f\u4e00\u4e2a\u975e\u5e38\u6709\u7528\u52a0\u8f7d\u5668\u3002\u5b83\u5141\u8bb8\u5f00\u53d1\u4eba\u5458\u5229\u7528\u7eaf CSS \u6587\u4ef6\uff0c\u4ee5\u53ca\u4e00\u4e2a\u7a7a&lt;div&gt;\u5143\u7d20\u4fbf\u53ef\u4ee5\u5feb\u901f\u7684\u521b\u5efa\u52a0\u8f7d\u6307\u793a\u5668\u3002<br><blockquote><p><strong>HERE\uff1a<a href=\"https://link.zhihu.com/?target=http%3A//www.raphaelfabeni.com.br/css-loader/\" class=\" wrap external\" target=\"_blank\" rel=\"nofollow noreferrer\">CSS Loader \u9879\u76ee\u5730\u5740<i class=\"icon-external\"></i></a></strong></p></blockquote><h2><b>6. <a href=\"https://link.zhihu.com/?target=https%3A//yarnpkg.com/\" class=\" wrap external\" target=\"_blank\" rel=\"nofollow noreferrer\">Yarn<i class=\"icon-external\"></i></a></b></h2><img src=\"https://pic3.zhimg.com/v2-ad9a1cf548cfd0994f22fef4f011555a_b.png\" data-rawwidth=\"1120\" data-rawheight=\"280\" class=\"origin_image zh-lightbox-thumb\" width=\"1120\" data-original=\"https://pic3.zhimg.com/v2-ad9a1cf548cfd0994f22fef4f011555a_r.png\">\u76f8\u4fe1\u8fd1\u671f Facebook \u63a8\u51fa\u7684\u5f00\u6e90 Node.js \u5305\u7ba1\u7406\u5668 Yarn\uff0c\u5927\u5bb6\u5df2\u7ecf\u6709\u6240\u8033\u95fb\u4e86\u3002\u5b83\u5177\u5907\u5f3a\u5927\u7684\u7f13\u5b58\u7cfb\u7edf\uff0c\u80fd\u591f\u5927\u5927\u964d\u4f4e\u5305\u7684\u5b89\u88c5\u65f6\u95f4\uff0c\u5e76\u4e14\u80fd\u591f\u4e3a\u53c2\u4e0e\u4e00\u4e2a\u9879\u76ee\u7684\u6240\u6709\u7528\u6237\u7ef4\u6301\u76f8\u540c\u7684\u8282\u70b9\u6a21\u5757\uff08node_modules\uff09\u76ee\u5f55\u7ed3\u6784\uff0c\u6709\u52a9\u4e8e\u51cf\u5c11\u96be\u4ee5\u8ffd\u8e2a\u7684 bug \u548c\u5728\u591a\u53f0\u673a\u5668\u4e0a\u590d\u5236\u3002<br><p>\u867d\u7136\uff0c\u5b83\u4e0e NPM \u4ea7\u751f\u80cc\u666f\u4e0d\u540c\uff0c\u4f46\u4f7f\u7528 Yarn \u51e0\u4e4e\u53ef\u4ee5\u7b49\u540c\u4e8e\u4f7f\u7528 NPM \uff0c\u5f00\u53d1\u4eba\u5458\u9700\u8981\u66f4\u5feb\u7684\u4e86\u89e3\u5b83\u54e6\uff01</p><blockquote><p><strong>HERE\uff1a<a href=\"https://link.zhihu.com/?target=https%3A//yarnpkg.com/\" class=\" wrap external\" target=\"_blank\" rel=\"nofollow noreferrer\">Yarn \u9879\u76ee\u5730\u5740<i class=\"icon-external\"></i></a></strong></p></blockquote><h2><b>7. <a href=\"https://link.zhihu.com/?target=https%3A//canvas-gauges.com/\" class=\" wrap external\" target=\"_blank\" rel=\"nofollow noreferrer\">Canvas Gauges<i class=\"icon-external\"></i></a></b></h2><img src=\"https://pic3.zhimg.com/v2-16afc3666e8040f4c57a7d63ebd13582_b.jpg\" data-rawwidth=\"785\" data-rawheight=\"370\" class=\"origin_image zh-lightbox-thumb\" width=\"785\" data-original=\"https://pic3.zhimg.com/v2-16afc3666e8040f4c57a7d63ebd13582_r.jpg\">Canvas Gauges \u662f\u4e00\u4e2a\u5229\u7528\u7eaf JavaScript \u548c HTML5 Canvas\uff08\u753b\u5e03\uff09\u6253\u9020\u7684\u53ef\u5b8c\u5168\u81ea\u5b9a\u4e49\u7684\u4eea\u8868\uff0c\u4f60\u53ef\u4ee5\u7528\u5b83\u6765\u521b\u5efa\u8bf8\u5982\u673a\u52a8\u8f66\u901f\u5ea6\u8868\u3001\u6e29\u5ea6\u8ba1\u7b49\u7c7b\u578b\u7684\u6d4b\u91cf\u8bbe\u5907\u3002<br><p>\u7531\u4e8e\u5b83\u7684\u4ee3\u7801\u91cf\u5f88\u5c0f\uff0c\u5e76\u4e14\u6ca1\u6709\u4f9d\u8d56\uff0c\u540c\u65f6\u9002\u7528\u4e8e\u7269\u8054\u7f51\u8bbe\u5907\u3002\u4f60\u53ef\u4ee5\u901a\u8fc7\u7f51\u7ad9\u7684<a href=\"https://link.zhihu.com/?target=https%3A//canvas-gauges.com/documentation/examples/\" class=\" wrap external\" target=\"_blank\" rel=\"nofollow noreferrer\">\u793a\u4f8b<i class=\"icon-external\"></i></a>\u6765\u4e86\u89e3\u5b83\u3002</p><blockquote><p><strong>HERE\uff1a<a href=\"https://link.zhihu.com/?target=https%3A//canvas-gauges.com/\" class=\" wrap external\" target=\"_blank\" rel=\"nofollow noreferrer\">Canvas Gauges \u9879\u76ee\u5730\u5740<i class=\"icon-external\"></i></a></strong></p></blockquote><h2><b>8. <a href=\"https://link.zhihu.com/?target=http%3A//cssicon.space/\" class=\" wrap external\" target=\"_blank\" rel=\"nofollow noreferrer\">CSS Icon<i class=\"icon-external\"></i></a></b></h2><img src=\"https://pic4.zhimg.com/v2-49f44fe28e0d39215449250e21334fbf_b.png\" data-rawwidth=\"785\" data-rawheight=\"370\" class=\"origin_image zh-lightbox-thumb\" width=\"785\" data-original=\"https://pic4.zhimg.com/v2-49f44fe28e0d39215449250e21334fbf_r.png\">CSS Icon \u662f\u4e00\u4e2a\u6c47\u805a\u4e86500+ \u7eaf CSS \u4ee3\u7801\u5b9e\u73b0\u7684\u56fe\u6807\u96c6\u7f51\u7ad9\u3002\u4f7f\u7528\u8d77\u6765\u4e5f\u5341\u5206\u7b80\u5355\uff0c\u5f53\u4f60\u70b9\u51fb\u4e86\u67d0\u4e00\u4e2a\u56fe\u6807\uff0c\u4fbf\u4f1a\u5f39\u51fa\u56fe\u6807\u5bf9\u5e94\u7684 HTML \u4e0e CSS \u4ee3\u7801\uff0c\u540c\u65f6\u4f60\u53ef\u4ee5\u76f4\u89c2\u7684\u4e86\u89e3\u5230 CSS \u4ee3\u7801\u7684\u4ec0\u4e48\u90e8\u5206\uff0c\u5b9e\u73b0\u4e86\u56fe\u6807\u7684\u54ea\u4e9b\u5143\u7d20\u3002<br><p>\u5982\u6b64\u68d2\u7684\u9879\u76ee\uff0c\u662f\u4e0d\u662f\u5f97\u7ed9\u6ee1\u5206\u5462\uff1f\u5feb\u6765 Enjoy\u5427\uff01</p><blockquote><p><strong>HERE\uff1a<a href=\"https://link.zhihu.com/?target=http%3A//cssicon.space/\" class=\" wrap external\" target=\"_blank\" rel=\"nofollow noreferrer\">CSS Icon \u9879\u76ee\u5730\u5740<i class=\"icon-external\"></i></a></strong></p></blockquote><h2><b>9. <a href=\"https://link.zhihu.com/?target=https%3A//osrec.github.io/currencyFormatter.js/\" class=\" wrap external\" target=\"_blank\" rel=\"nofollow noreferrer\">CurrencyFormatter.js<i class=\"icon-external\"></i></a></b></h2><img src=\"https://pic3.zhimg.com/v2-01bb7f506add01c5bc203bea44931c42_b.png\" data-rawwidth=\"785\" data-rawheight=\"370\" class=\"origin_image zh-lightbox-thumb\" width=\"785\" data-original=\"https://pic3.zhimg.com/v2-01bb7f506add01c5bc203bea44931c42_r.png\">CurrencyFormatter.js \u662f\u4e00\u6b3e\u7b80\u5355\u5b9e\u7528\u7684\u7eaf JS \u683c\u5f0f\u5316\u8d27\u5e01\u5e93\u3002\u5b83\u652f\u6301 155 \u79cd\u4e0d\u540c\u56fd\u5bb6\u7684\u8d27\u5e01\u683c\u5f0f\uff0c\u4ee5\u53ca\u8d85\u8fc7 700 \u79cd\u4e0d\u540c\u8bed\u8a00\u7684\u672c\u5730\u5316\u8bbe\u7f6e\u3002<br><p>\u6b64\u5916\uff0c\u5b83\u8fd8\u80fd\u5904\u7406\u67d0\u4e9b\u4e0d\u91c7\u7528\u7684\u8d27\u5e01\u683c\u5f0f\uff0c\u529f\u80fd\u975e\u5e38\u5f3a\u5927\u3002</p><blockquote><p><strong>HERE\uff1a<a href=\"https://link.zhihu.com/?target=https%3A//osrec.github.io/currencyFormatter.js/\" class=\" wrap external\" target=\"_blank\" rel=\"nofollow noreferrer\">CurrencyFormatter.js \u9879\u76ee\u5730\u5740<i class=\"icon-external\"></i></a></strong></p></blockquote><h2><b>10. <a href=\"https://link.zhihu.com/?target=http%3A//thednp.github.io/kute.js/\" class=\" wrap external\" target=\"_blank\" rel=\"nofollow noreferrer\">KUTE.js<i class=\"icon-external\"></i></a></b></h2><img src=\"https://pic1.zhimg.com/v2-26834d2be48df6599affd581d359aedc_b.png\" data-rawwidth=\"785\" data-rawheight=\"370\" class=\"origin_image zh-lightbox-thumb\" width=\"785\" data-original=\"https://pic1.zhimg.com/v2-26834d2be48df6599affd581d359aedc_r.png\">\u4e00\u6b3e\u5177\u6709\u9ad8\u6027\u80fd\u7684\u539f\u751f JavaScript \u52a8\u753b\u5f15\u64ce\uff1aKUTE.js. \u5b83\u7684\u6838\u5fc3\u5e93\u63d0\u4f9b\u4e86\u6240\u6709\u57fa\u672c\u7684\u52a8\u753b\u65b9\u6cd5\uff0c\u4f60\u53ef\u4ee5\u6dfb\u52a0\u8bb8\u591a\u63d2\u4ef6\u6765\u4e30\u5bcc KUTE \u7684\u529f\u80fd\u3002\u540c\u65f6\uff0c\u5b83\u8fd8\u5177\u5907\u5355\u72ec\u7684\u6269\u5c55\uff0c\u53ef\u4ee5\u540c\u65f6\u4e0ejQuery\u3001SVG\u3001CSS\u5c5e\u6027\u7b49\u4e00\u8d77\u5de5\u4f5c\u3002<br><blockquote><p><strong>HERE\uff1a<a href=\"https://link.zhihu.com/?target=http%3A//thednp.github.io/kute.js/\" class=\" wrap external\" target=\"_blank\" rel=\"nofollow noreferrer\">KUTE.js \u9879\u76ee\u5730\u5740<i class=\"icon-external\"></i></a></strong></p></blockquote><h2><b>11. <a href=\"https://link.zhihu.com/?target=https%3A//marcosmoura.github.io/vue-material/%23/\" class=\" wrap external\" target=\"_blank\" rel=\"nofollow noreferrer\">Vue Material<i class=\"icon-external\"></i></a></b></h2><img src=\"https://pic3.zhimg.com/v2-90f64827b4546c0b21086da34ce34afa_b.jpg\" data-rawwidth=\"785\" data-rawheight=\"384\" class=\"origin_image zh-lightbox-thumb\" width=\"785\" data-original=\"https://pic3.zhimg.com/v2-90f64827b4546c0b21086da34ce34afa_r.jpg\">Vue Material \u662f\u4e00\u4e2a\u6839\u636e Material Design \u89c4\u8303\u6784\u5efa\u7684\u8f7b\u91cf\u7ea7 Vue.js \u6846\u67b6\u3002\u5b83\u65e8\u5728\u63d0\u4f9b\u4e00\u7ec4\u53ef\u91cd\u7528\u7684\u9ad8\u54c1\u8d28\u7ec4\u4ef6\u548c\u4e00\u7cfb\u5217 UI \u5143\u7d20\uff0c\u901a\u8fc7 Vue2.0 \u652f\u6301\u73b0\u4ee3\u7684 Web \u6d4f\u89c8\u5668\u6765\u6784\u5efa\u5e94\u7528\u7a0b\u5e8f\u3002<br><p>\u8be5\u5e93\u4e5f\u5f88\u5bb9\u6613\u5b9e\u73b0\uff0c\u9664\u4e86 Vue.js \u4e4b\u5916\u6ca1\u6709\u4efb\u4f55\u4f9d\u8d56\u3002</p><blockquote><p><strong>HERE\uff1a<a href=\"https://link.zhihu.com/?target=https%3A//marcosmoura.github.io/vue-material/%23/\" class=\" wrap external\" target=\"_blank\" rel=\"nofollow noreferrer\">Vue Material \u9879\u76ee\u5730\u5740<i class=\"icon-external\"></i></a></strong></p></blockquote><h2><b>12. <a href=\"https://link.zhihu.com/?target=http%3A//devexpress.github.io/testcafe/\" class=\" wrap external\" target=\"_blank\" rel=\"nofollow noreferrer\">Test Cafe<i class=\"icon-external\"></i></a></b></h2><img src=\"https://pic4.zhimg.com/v2-efdfcb3805d95c371222bea31b6e7ddf_b.png\" data-rawwidth=\"1007\" data-rawheight=\"151\" class=\"origin_image zh-lightbox-thumb\" width=\"1007\" data-original=\"https://pic4.zhimg.com/v2-efdfcb3805d95c371222bea31b6e7ddf_r.png\">Test Cafe \u662f\u4e00\u4e2a\u7eaf Node.js \u7f16\u5199\u7684\u7528\u4e8e\u6d4b\u8bd5 Web \u5e94\u7528\u7a0b\u5e8f\u7aef\u5230\u7aef\u7684\u89e3\u51b3\u65b9\u6848\u3002\u5b83\u57fa\u4e8e Node.js\uff0c\u5e76\u4e14\u4e0d\u9700\u8981\u5b89\u88c5 NPM \u5305\u4e4b\u5916\u7684\u4efb\u4f55\u4e1c\u897f\u2014\u2014\u4e0d\u9700\u8981\u6d4f\u89c8\u5668\u63d2\u4ef6\u4ee5\u53ca\u7f16\u8bd1\u5668\u3002<br><p>\u4e00\u65e6\u4f60\u7f16\u5199\u4e86\u6d4b\u8bd5\uff0c\u8fd0\u884c Test Cafe\uff0c\u5b83\u5c06\u4e3a\u4f60\u8fdb\u884c\u6d4f\u89c8\u5668\u6d4b\u8bd5\u3001\u6536\u96c6\u7ed3\u679c\u5e76\u521b\u5efa\u62a5\u544a\u3002</p><blockquote><p><strong>HERE\uff1a<a href=\"https://link.zhihu.com/?target=http%3A//devexpress.github.io/testcafe/\" class=\" wrap external\" target=\"_blank\" rel=\"nofollow noreferrer\">Test Cafe \u9879\u76ee\u5730\u5740<i class=\"icon-external\"></i></a></strong></p></blockquote><h2><b>13. <a href=\"https://link.zhihu.com/?target=http%3A//corecss.io/\" class=\" wrap external\" target=\"_blank\" rel=\"nofollow noreferrer\">Core.css<i class=\"icon-external\"></i></a></b></h2><img src=\"https://pic4.zhimg.com/v2-46b91468e6d97a88e7b1989894699557_b.png\" data-rawwidth=\"1048\" data-rawheight=\"164\" class=\"origin_image zh-lightbox-thumb\" width=\"1048\" data-original=\"https://pic4.zhimg.com/v2-46b91468e6d97a88e7b1989894699557_r.png\">Core.css \u662f\u4e00\u4e2a\u7528\u4e8e\u6784\u5efa\u54cd\u5e94\u5f0f\u7f51\u7ad9\u7684\u8f7b\u91cf\u7ea7\u6846\u67b6\u3002\u5b83\u538b\u7f29\u540e\u4ec5\u6709 1.3kb\uff0c\u540c\u65f6\u5b83\u6ca1\u6709\u9884\u5148\u8bbe\u5b9a\u7684\u5143\u7d20\u548c\u5185\u7f6e\u52a8\u753b\u3002\u6240\u4ee5\u9002\u7528\u4e8e\u642d\u5efa\u4efb\u4f55\u5c0f\u578b\u7684 Web \u9879\u76ee\u3002<br><blockquote><p><strong>HERE\uff1a<a href=\"https://link.zhihu.com/?target=http%3A//corecss.io/\" class=\" wrap external\" target=\"_blank\" rel=\"nofollow noreferrer\">Core.css \u9879\u76ee\u5730\u5740<i class=\"icon-external\"></i></a></strong></p></blockquote><h2><b>14. <a href=\"https://link.zhihu.com/?target=https%3A//github.com/Bilibili/flv.js\" class=\" wrap external\" target=\"_blank\" rel=\"nofollow noreferrer\">Flv.js<i class=\"icon-external\"></i></a></b></h2><img src=\"https://pic1.zhimg.com/v2-082fd277d2abe8c7e52786d8a7d1359c_b.png\" data-rawwidth=\"785\" data-rawheight=\"370\" class=\"origin_image zh-lightbox-thumb\" width=\"785\" data-original=\"https://pic1.zhimg.com/v2-082fd277d2abe8c7e52786d8a7d1359c_r.png\">B\u7ad9\u76f8\u4fe1\u5927\u5bb6\u90fd\u4e0d\u4f1a\u964c\u751f\uff0c\u800c Flv.js \u5c31\u662f\u7531 bilibili \u7f51\u7ad9\u5f00\u6e90\u7684 HTML5 Flash \u89c6\u9891\uff08FLV\uff09\u64ad\u653e\u5668\uff0c\u7eaf\u539f\u751f JavaScript \u5f00\u53d1\uff08ECMAScript 6 \u7f16\u5199\uff09 \uff0c\u6ca1\u6709\u7528\u5230 Flash\u3002<br><p>\u5b83\u7684\u5de5\u4f5c\u539f\u7406\u662f Flv.js \u5728 JavaScript \u4e2d\u6d41\u5f0f\u89e3\u6790 flv \u6587\u4ef6\u6d41\uff0c\u5e76\u5b9e\u65f6\u8f6c\u5c01\u88c5\u4e3a fmp4 \uff0c\u901a\u8fc7 Media Source Extensions \u5582\u7ed9\u6d4f\u89c8\u5668\uff0c\u5b9e\u73b0\u4e86 FLV \u683c\u5f0f\u89c6\u9891\u7684\u64ad\u653e\u3002</p><blockquote><p><strong>HERE\uff1a<a href=\"https://link.zhihu.com/?target=https%3A//github.com/Bilibili/flv.js\" class=\" wrap external\" target=\"_blank\" rel=\"nofollow noreferrer\">Flv.js \u9879\u76ee\u5730\u5740<i class=\"icon-external\"></i></a></strong></p></blockquote><h2><b>15. <a href=\"https://link.zhihu.com/?target=https%3A//zeit.co/blog/next\" class=\" wrap external\" target=\"_blank\" rel=\"nofollow noreferrer\">Next.js<i class=\"icon-external\"></i></a></b></h2><p><img src=\"https://pic1.zhimg.com/v2-7b9d61c79e318e2a62ba3d34a2024798_b.png\" data-rawwidth=\"785\" data-rawheight=\"370\" class=\"origin_image zh-lightbox-thumb\" width=\"785\" data-original=\"https://pic1.zhimg.com/v2-7b9d61c79e318e2a62ba3d34a2024798_r.png\">Next.js \u662f\u4e00\u4e2a\u57fa\u4e8e React \u7684\u901a\u7528 JavaScript \u6846\u67b6\u3002\u5b83\u63d0\u4f9b\u4e86\u4e00\u79cd\u4fbf\u5229\u7684\u65b9\u5f0f\u6765\u521b\u5efa\u65b0\u7684 JavaScript Web \u5e94\u7528\u7a0b\u5e8f\u3002\u5f00\u53d1\u4eba\u5458\u4e0d\u5fc5\u5728\u642d\u5efa Webpack \u6216 Babel \u7684\u914d\u7f6e\u4e0a\u82b1\u8d39\u592a\u591a\u7684\u65f6\u95f4\u4e86\u3002</p><blockquote><p><strong>HERE\uff1a<a href=\"https://link.zhihu.com/?target=https%3A//zeit.co/blog/next\" class=\" wrap external\" target=\"_blank\" rel=\"nofollow noreferrer\">Next.js \u9879\u76ee\u5730\u5740<i class=\"icon-external\"></i></a></strong></p></blockquote><p><strong>\u8bd1\u8005\u6ce8\uff1a</strong>\u5173\u4e8e Next.js \u7684\u8be6\u7ec6\u4ecb\u7ecd\u53ef\u4ee5<a href=\"https://link.zhihu.com/?target=http%3A//www.infoq.com/cn/news/2016/11/next-js-universal-react-framewor\" class=\" wrap external\" target=\"_blank\" rel=\"nofollow noreferrer\">\u770b\u8fd9\u91cc<i class=\"icon-external\"></i></a>\u3002</p><p>\u4ee5\u4e0a\u5c31\u672c\u6587\u6240\u6709\u7684\u5206\u4eab\uff0c\u5e0c\u671b\u4f60\u80fd\u627e\u5230\u9002\u5408\u4f60\u9879\u76ee\u7684\u524d\u7aef\u5e93\u3002</p><p>\u5982\u679c\u89c9\u5f97\u6587\u7ae0\u4e0d\u9519\uff0c\u4e0d\u59a8\u70b9\u4e2a\u8d5e\u3002^_^</p><p><strong>\u6ce8\uff1a</strong>\u672c\u6587\u7248\u6743\u5f52\u539f\u4f5c\u8005\u6240\u6709\u3002\u5982\u9700\u8f6c\u8f7d\u8bd1\u6587\uff0c\u70e6\u8bf7\u6ce8\u660e\u51fa\u5904\uff0c\u8c22\u8c22\uff01</p><blockquote><p><b>\u82f1\u6587\u539f\u6587\uff1a<a href=\"https://link.zhihu.com/?target=http%3A//tutorialzine.com/2016/11/15-interesting-javascript-and-css-libraries-for-november-2016/\" class=\" wrap external\" target=\"_blank\" rel=\"nofollow noreferrer\">15 Interesting JavaScript and CSS Libraries for November 2016<i class=\"icon-external\"></i></a><br>\u4f5c\u8005\uff1aDanny Markov<br>\u8bd1\u8005\uff1a<a href=\"https://link.zhihu.com/?target=http%3A//weibo.com/itlion114/\" class=\" wrap external\" target=\"_blank\" rel=\"nofollow noreferrer\">IT\u7a0b\u5e8f\u72ee<i class=\"icon-external\"></i></a><br>\u8bd1\u6587\u6e90\u81ea\uff1a<a href=\"https://link.zhihu.com/?target=http%3A//www.jianshu.com/p/f651fc45e586\" class=\" external\" target=\"_blank\" rel=\"nofollow noreferrer\"><span class=\"invisible\">http://www.</span><span class=\"visible\">jianshu.com/p/f651fc45e</span><span class=\"invisible\">586</span><span class=\"ellipsis\"></span><i class=\"icon-external\"></i></a></b></p></blockquote>", "state": "published", "lastestTipjarors": [], "tipjarTagLine": "\u89c9\u5f97\u6587\u7ae0\u4e0d\u9519\uff0c\u4e0d\u59a8\u70b9\u4e2a\u8d5e\u3002", "sourceUrl": "", "pageCommentsCount": 12, "tipjarorCount": 0, "canComment": false, "snapshotUrl": "", "slug": 24162642, "publishedTime": "2016-12-04T18:26:35+08:00", "url": "/p/24162642", "title": "15 \u4e2a\u6709\u8da3\u7684 JavaScript \u4e0e CSS \u5e93", "lastestLikers": [{"profileUrl": "https://www.zhihu.com/people/qin-guo-41", "bio": "\u6211\u8981\u8fbe\u5230\u4e00\u4e2a\u9ad8\u5ea6\uff0c\u4f60\u9065\u4e0d\u53ef\u53ca", "hash": "e3575e4311c581fd6c87370ecfddbc65", "uid": 598189549118164992, "isOrg": false, "description": "\u751f\u5982\u96e8\u5e18", "isOrgWhiteList": false, "slug": "qin-guo-41", "avatar": {"id": "2f7b71c34c82a9349f24289252c3f24f", "template": "https://pic4.zhimg.com/{id}_{size}.jpg"}, "name": "\u6611\u679c"}, {"profileUrl": "https://www.zhihu.com/people/cheng-qi-ming-88", "bio": "\u975e\u7406\u6027\u7684\u5730\u754c\u751f\u7269", "hash": "0281070ef97e02f5b7f1b12e75f7225d", "uid": 68984581914624, "isOrg": false, "description": "\u975e\u7406\u6027\u7684\u5730\u754c\u751f\u7269", "isOrgWhiteList": false, "slug": "cheng-qi-ming-88", "avatar": {"id": "8d6a640fe76c2fdfd1931f87f4545f65", "template": "https://pic2.zhimg.com/{id}_{size}.jpg"}, "name": "\u6dc7\u94ed"}, {"profileUrl": "https://www.zhihu.com/people/cao-xian-12", "bio": "\u7ed8\u753b\u7231\u597d\u8005\uff0cBigfan of locomotives.", "hash": "56780e054bb189bfcbeeacce69446b18", "uid": 57837040435200, "isOrg": false, "description": "\u6c42\u753b\u53cb\u3002", "isOrgWhiteList": false, "slug": "cao-xian-12", "avatar": {"id": "668c7ab470663efc66dcc24bc132ad03", "template": "https://pic4.zhimg.com/{id}_{size}.jpg"}, "name": "Omou"}, {"profileUrl": "https://www.zhihu.com/people/gong-huan-huan", "bio": "\u4f1a\u5199\u70b9\u513f\u4ee3\u7801\u7684\u8bbe\u8ba1\u72ee", "hash": "acf8a7eb3a106c7697a67b4c8e2df31a", "uid": 37871264202752, "isOrg": false, "description": "\u672a\u6765\u4e0d\u8fce\uff0c\u5f53\u4e0b\u4e0d\u6742\uff0c\u65e2\u5f80\u4e0d\u604b\u3002", "isOrgWhiteList": false, "slug": "gong-huan-huan", "avatar": {"id": "25e437db3a5abf5971dcc03acd74a355", "template": "https://pic2.zhimg.com/{id}_{size}.jpg"}, "name": "\u897f\u5b50"}, {"profileUrl": "https://www.zhihu.com/people/hu-xian-sen-83-52", "bio": "\u524d\u7aef\u61f5\u65b0...", "hash": "24cfbf001ae8be64cc1af6ca06cefc51", "uid": 759686711155384320, "isOrg": false, "description": "\u524d\u7aef\u7a0b\u5e8f\u733f/\u5200\u5854\ud83d\udc36/\u4f2a\u6587\u827a\u9752\u5e74", "isOrgWhiteList": false, "slug": "hu-xian-sen-83-52", "avatar": {"id": "94afe042fdc554259ac7d5f80a2f6651", "template": "https://pic2.zhimg.com/{id}_{size}.jpg"}, "name": "\u534a\u5c9b\u94c1\u76d2jQ"}], "summary": "<img src=\"https://pic1.zhimg.com/v2-7a0efae26767a693af95a203b2b8fef0_200x112.jpg\" data-rawwidth=\"785\" data-rawheight=\"370\" class=\"origin_image inline-img zh-lightbox-thumb\" data-original=\"https://pic1.zhimg.com/v2-7a0efae26767a693af95a203b2b8fef0_r.jpg\">\u5728\u5341\u4e00\u6708\u4efd\u7684\u524d\u7aef\u6280\u672f\u5217\u8868\u4e2d\uff0c\u6211\u4eec\u6574\u5408\u4e86\u4e00\u4e9b\u4ee4\u4eba\u611f\u5230\u60ca\u53f9\u7684 GitHub \u9879\u76ee\uff0c\u5176\u4e2d\u5305\u542b\u4e86\u65b0\u7684 CSS \u6846\u67b6\u3001node.js\u5305\u7ba1\u7406\u5668\uff0c\u4ee5\u53ca\u7528\u4e8e\u5b9e\u73b0\u56fe\u6807\u3001\u52a0\u8f7d\u6548\u679c\u3001\u5de5\u5177\u63d0\u793a\u7684\u7eaf CSS \u89e3\u51b3\u65b9\u6848\u3002\u90a3\u4e48\uff0c\u8ba9\u6211\u4eec\u4e00\u8d77\u6765\u770b\u770b\u5427\u3002Have Fun \uff01<b>1. <a href=\"https://link.zhihu.com/?target=https%3A//github.com/KingPixil/wing/\" class=\" wrap external\" target=\"_blank\" rel=\"nofollow noreferrer\">Wing<i class=\"icon-external\"></i></a></b>Wing \u662f\u4e00\u4e2a\u5fae\u578b\uff08\u538b\u7f29\u540e\u4ec5\u6709\u2026", "reviewingCommentsCount": 0, "meta": {"previous": {"isTitleImageFullScreen": false, "rating": "none", "titleImage": "https://pic2.zhimg.com/v2-fa4158e076b40fe2b91d18cb48d5f539_r.jpg", "links": {"comments": "/api/posts/24153835/comments"}, "topics": [{"url": "https://www.zhihu.com/topic/19552330", "id": "19552330", "name": "\u7a0b\u5e8f\u5458"}, {"url": "https://www.zhihu.com/topic/19550901", "id": "19550901", "name": "\u524d\u7aef\u5f00\u53d1"}, {"url": "https://www.zhihu.com/topic/19554298", "id": "19554298", "name": "\u7f16\u7a0b"}], "href": "/api/posts/24153835", "excerptTitle": "", "author": {"profileUrl": "https://www.zhihu.com/people/itlion114", "bio": "\u7f16\u7a0b\u5b66\u4e60\u5206\u4eab\u8005\uff0c\u4e13\u6ce8\u524d\u7aef\u3002", "hash": "378ab035ef835f51e537548d6b73900f", "uid": 784321885851762688, "isOrg": false, "description": "\u7f16\u7a0b\u5b66\u4e60\u5206\u4eab\u8005\uff0c\u4e13\u6ce8\u524d\u7aef\u3002", "isOrgWhiteList": false, "slug": "itlion114", "avatar": {"id": "v2-3bdbf34128d395dd4e1ebe21a56578cd", "template": "https://pic2.zhimg.com/{id}_{size}.jpg"}, "name": "IT\u7a0b\u5e8f\u72ee"}, "column": {"slug": "itlion114", "name": "IT\u6280\u672f\u5206\u4eab"}, "content": "<p>\u5bf9\u4e8e\u524d\u7aef\u5f00\u53d1\u8005\u800c\u8a00\uff0c<strong><a href=\"https://link.zhihu.com/?target=http%3A//codepen.io/\" class=\" wrap external\" target=\"_blank\" rel=\"nofollow noreferrer\">CodePen<i class=\"icon-external\"></i></a></strong>\u4e00\u76f4\u662f\u76db\u4ea7\u60f3\u6cd5\u4e0e\u521b\u610f\u7684\u5723\u5730\u3002\u5b83\u80fd\u591f\u4ee5\u5728\u7ebf\u5f62\u5f0f\uff0c\u5c06\u524d\u7aef\u4ee3\u7801\u7f16\u8f91\u4e0e\u5c55\u793a\u3002\u540c\u65f6\uff0c\u4f60\u8fd8\u53ef\u4ee5\u4e0e\u5168\u7403\u4f17\u591a\u7684\u5f00\u53d1\u8005\u4eec\u4ea4\u6d41\u60f3\u6cd5\u3001\u5206\u4eab\u4f60\u7684\u4f5c\u54c1\u3002</p><p>\u4eca\u5929\uff0c\u7a0b\u5c0f\u72ee\u5728 CodePen \u4e0a\u4e5f\u4e13\u95e8\u6311\u9009\u4e86\u8fd1\u671f\u70ed\u95e8\u7684\u524d\u7aef\u9879\u76ee\uff0c\u4e0e\u524d\u7aefer\u3001\u8bbe\u8ba1\u5e08\u4eec\u5206\u4eab\u3002\u76f8\u4fe1\uff0c\u8fd9\u4e9b\u4f18\u79c0\u7684\u4f5c\u54c1\uff0c\u4f1a\u8ba9\u4f60\u8033\u76ee\u4e00\u65b0\uff0c\u6216\u8bb8\u8fd8\u80fd\u5e26\u7ed9\u4f60\u4e0d\u5c11\u7075\u611f\u5462\uff01</p><p>Have Fun\uff01</p><h2><b>1. <a href=\"https://link.zhihu.com/?target=http%3A//codepen.io/anatravas/pen/NbggmR\" class=\" wrap external\" target=\"_blank\" rel=\"nofollow noreferrer\">\u52a8\u753b\u89c6\u5dee\u6548\u679c<i class=\"icon-external\"></i></a></b></h2><p>\u4f5c\u8005\uff1aAna Travas</p><br><img src=\"https://pic1.zhimg.com/v2-dafffa059146cc9d6ce9500c0eb3dce0_b.jpg\" data-rawwidth=\"877\" data-rawheight=\"482\" class=\"origin_image zh-lightbox-thumb\" width=\"877\" data-original=\"https://pic1.zhimg.com/v2-dafffa059146cc9d6ce9500c0eb3dce0_r.jpg\">\u4f7f\u7528 jQuery \u63d2\u4ef6\u521b\u5efa\u89c6\u5dee\u6548\u679c\uff0c\u5e76\u7528 CSS \u52a8\u753b\u5236\u4f5c\u7684\u95ea\u70c1\u4e0e\u6d41\u661f\u3002<br><blockquote><p><b>\u9879\u76ee\u5730\u5740\uff1a<a href=\"https://link.zhihu.com/?target=http%3A//codepen.io/anatravas/pen/NbggmR\" class=\" wrap external\" target=\"_blank\" rel=\"nofollow noreferrer\">\u4f20\u9001\u95e8<i class=\"icon-external\"></i></a></b></p></blockquote><h2><b>2. <a href=\"https://link.zhihu.com/?target=http%3A//codepen.io/davidkpiano/pen/VmMWZW\" class=\" wrap external\" target=\"_blank\" rel=\"nofollow noreferrer\">\u65e5\u51fa/\u65e5\u843d\u52a8\u753b<i class=\"icon-external\"></i></a></b></h2><p>\u4f5c\u8005\uff1aDavid Khourshid</p><img src=\"https://pic4.zhimg.com/v2-f34be8d8b418dcf5dccbd26bd60dc04b_b.jpg\" data-rawwidth=\"620\" data-rawheight=\"465\" class=\"origin_image zh-lightbox-thumb\" width=\"620\" data-original=\"https://pic4.zhimg.com/v2-f34be8d8b418dcf5dccbd26bd60dc04b_r.jpg\">\u7eaf CSS \u8fd8\u539f <strong><a href=\"https://link.zhihu.com/?target=https%3A//dribbble.com/shots/3114192-Sunset-Sunrise-Animation\" class=\" wrap external\" target=\"_blank\" rel=\"nofollow noreferrer\">Dribbble<i class=\"icon-external\"></i></a></strong> \u4e0a Denys Boldyriev \u548c Andrey Pixy \u6240\u8bbe\u8ba1\u7684\u65e5\u51fa/\u65e5\u843d\u52a8\u753b\u6548\u679c\uff0c\u76ee\u524d\u53ea\u80fd\u5728 Chrome \u6d4f\u89c8\u5668\u4e2d\u8fd0\u884c\u3002<br><blockquote><p><strong>\u9879\u76ee\u5730\u5740\uff1a<a href=\"https://link.zhihu.com/?target=http%3A//codepen.io/davidkpiano/pen/VmMWZW\" class=\" wrap external\" target=\"_blank\" rel=\"nofollow noreferrer\">\u4f20\u9001\u95e8<i class=\"icon-external\"></i></a></strong></p></blockquote><h2><b>3. <a href=\"https://link.zhihu.com/?target=http%3A//codepen.io/brookjordan/pen/XNgmGq\" class=\" wrap external\" target=\"_blank\" rel=\"nofollow noreferrer\">Moko's lost!<i class=\"icon-external\"></i></a></b></h2><p>\u4f5c\u8005\uff1aBrook Jordan</p><img src=\"https://pic1.zhimg.com/v2-e7d58e6d838f22f855a01c2756fdf578_b.jpg\" data-rawwidth=\"869\" data-rawheight=\"478\" class=\"origin_image zh-lightbox-thumb\" width=\"869\" data-original=\"https://pic1.zhimg.com/v2-e7d58e6d838f22f855a01c2756fdf578_r.jpg\">\u5229\u7528 CSS \u4e0e JS \u5b9e\u73b0\u7684404\u9875\u9762\u2014\u2014\u5409\u7965\u7269 TradeGecko \u7684\u8ff7\u5931\uff0c\u8fd9\u98ce\u683c\u7b80\u76f4\u840c\u840c\u54d2\uff01<br><blockquote><p><strong>\u9879\u76ee\u5730\u5740\uff1a<a href=\"https://link.zhihu.com/?target=http%3A//codepen.io/brookjordan/pen/XNgmGq\" class=\" wrap external\" target=\"_blank\" rel=\"nofollow noreferrer\">\u4f20\u9001\u95e8<i class=\"icon-external\"></i></a></strong></p></blockquote><h2><b>4. <a href=\"https://link.zhihu.com/?target=http%3A//codepen.io/SamuelJanes/pen/woqjvK\" class=\" wrap external\" target=\"_blank\" rel=\"nofollow noreferrer\">\u7eaf CSS \u6309\u94ae\u63d0\u793a\u6846<i class=\"icon-external\"></i></a></b></h2><p>\u4f5c\u8005\uff1aSamuel Janes</p><img src=\"https://pic3.zhimg.com/v2-8110d407eb8b793ba5c8e8ec2626b6b2_b.jpg\" data-rawwidth=\"878\" data-rawheight=\"387\" class=\"origin_image zh-lightbox-thumb\" width=\"878\" data-original=\"https://pic3.zhimg.com/v2-8110d407eb8b793ba5c8e8ec2626b6b2_r.jpg\">\u7eaf CSS \u5b9e\u73b0\u7684 4 \u6b3e\u6309\u94ae\u63d0\u793a\u6846\uff0c\u5206\u522b\u4e3a\u84dd\u8272\u3001\u7ea2\u8272\u3001\u7eff\u8272\u4e0e\u7d2b\u8272\u3002<br><blockquote><p><strong>\u9879\u76ee\u5730\u5740\uff1a<a href=\"https://link.zhihu.com/?target=http%3A//codepen.io/SamuelJanes/pen/woqjvK\" class=\" wrap external\" target=\"_blank\" rel=\"nofollow noreferrer\">\u4f20\u9001\u95e8<i class=\"icon-external\"></i></a></strong></p></blockquote><h2><b>5. <a href=\"https://link.zhihu.com/?target=http%3A//codepen.io/maahbomfim/pen/qqPOdr\" class=\" wrap external\" target=\"_blank\" rel=\"nofollow noreferrer\">\u53ef\u7231\u7684\u72d0\u72f8<i class=\"icon-external\"></i></a></b></h2><p>\u4f5c\u8005\uff1aMarcela</p><img src=\"https://pic1.zhimg.com/v2-a0e02e5509923cf2ec0cbb61426105fc_b.jpg\" data-rawwidth=\"724\" data-rawheight=\"415\" class=\"origin_image zh-lightbox-thumb\" width=\"724\" data-original=\"https://pic1.zhimg.com/v2-a0e02e5509923cf2ec0cbb61426105fc_r.jpg\">\u7eaf CSS \u5b9e\u73b0 <strong><a href=\"https://link.zhihu.com/?target=https%3A//dribbble.com/shots/3101741-fox-icon\" class=\" wrap external\" target=\"_blank\" rel=\"nofollow noreferrer\">Dribbble<i class=\"icon-external\"></i></a></strong> \u4e0a\u53ef\u7231\u72d0\u72f8\u56fe\u6807\u3002<br><blockquote><p><strong>\u9879\u76ee\u5730\u5740\uff1a<a href=\"https://link.zhihu.com/?target=http%3A//codepen.io/maahbomfim/pen/qqPOdr\" class=\" wrap external\" target=\"_blank\" rel=\"nofollow noreferrer\">\u4f20\u9001\u95e8<i class=\"icon-external\"></i></a></strong></p></blockquote><h2><b>6. <a href=\"https://link.zhihu.com/?target=http%3A//codepen.io/netsi1964/pen/qqXBmx\" class=\" wrap external\" target=\"_blank\" rel=\"nofollow noreferrer\">SVG/ReactJS \u5b9e\u73b0\u7684\u6570\u5b66\u6a21\u578b<i class=\"icon-external\"></i></a></b></h2><p>\u4f5c\u8005\uff1aSten Hougaard</p><img src=\"https://pic2.zhimg.com/v2-e0a535e46110f17082fe64dc0ae12ded_b.jpg\" data-rawwidth=\"897\" data-rawheight=\"480\" class=\"origin_image zh-lightbox-thumb\" width=\"897\" data-original=\"https://pic2.zhimg.com/v2-e0a535e46110f17082fe64dc0ae12ded_r.jpg\">\u8fd9\u4f4d\u4f5c\u8005\u70ed\u8877\u4e8e\u901a\u8fc7\u6570\u5b66\u7684\u65b9\u5f0f\u6765\u751f\u6210\u56fe\u5f62\u3002\u4ed6\u4f7f\u7528\u4e86 ReactJS \u751f\u6210\u4e86\u4e00\u4e9b\u975e\u5e38\u6709\u8da3\u7684 SVG \u56fe\u5f62\uff0c\u5e76\u4e14\u7ed9\u51fa\u4e86\u53ef\u4ee5\u81ea\u7531\u8c03\u8282\u7684\u90e8\u5206\u793a\u4f8b\u3002\u5927\u5bb6\u6765\u611f\u53d7\u4e0b\u3002<blockquote><p><strong>\u9879\u76ee\u5730\u5740\uff1a<a href=\"https://link.zhihu.com/?target=http%3A//codepen.io/netsi1964/pen/qqXBmx\" class=\" wrap external\" target=\"_blank\" rel=\"nofollow noreferrer\">\u4f20\u9001\u95e8<i class=\"icon-external\"></i></a></strong></p></blockquote><h2><b>7. <a href=\"https://link.zhihu.com/?target=http%3A//codepen.io/monkeyslunch/pen/pNwMaL\" class=\" wrap external\" target=\"_blank\" rel=\"nofollow noreferrer\">\u6eda\u52a8 LOGO \u6548\u679c<i class=\"icon-external\"></i></a></b></h2><p>\u4f5c\u8005\uff1aSpencer Goldade</p><img src=\"https://pic2.zhimg.com/v2-12401b4876b0b35fb0326a79ec0c53e5_b.jpg\" data-rawwidth=\"800\" data-rawheight=\"494\" class=\"origin_image zh-lightbox-thumb\" width=\"800\" data-original=\"https://pic2.zhimg.com/v2-12401b4876b0b35fb0326a79ec0c53e5_r.jpg\">CSS \u4e0e JS \u5b9e\u73b0\u7684\u4e0b\u62c9\u6eda\u52a8 LOGO \u6548\u679c\u3002<br><blockquote><p><strong>\u9879\u76ee\u5730\u5740\uff1a<a href=\"https://link.zhihu.com/?target=http%3A//codepen.io/monkeyslunch/pen/pNwMaL\" class=\" wrap external\" target=\"_blank\" rel=\"nofollow noreferrer\">\u4f20\u9001\u95e8<i class=\"icon-external\"></i></a></strong></p></blockquote><h2><b>8. <a href=\"https://link.zhihu.com/?target=http%3A//codepen.io/chrisgannon/pen/QGqMGE\" class=\" wrap external\" target=\"_blank\" rel=\"nofollow noreferrer\">Merry Chris-morph!<i class=\"icon-external\"></i></a></b></h2><p>\u4f5c\u8005\uff1aChris Gannon</p><img src=\"https://pic2.zhimg.com/v2-e7fd8b0fd38d8fa15d34be7cc6f48b15_b.jpg\" data-rawwidth=\"557\" data-rawheight=\"395\" class=\"origin_image zh-lightbox-thumb\" width=\"557\" data-original=\"https://pic2.zhimg.com/v2-e7fd8b0fd38d8fa15d34be7cc6f48b15_r.jpg\">\u53c8\u5feb\u5230\u4e86\uff0c\u4e00\u5e74\u4e00\u5ea6\u7684\u5723\u8bde\u8282\u4e86\u3002\u4f5c\u8005\u53c2\u7167\u4e86\u7531 <strong><a href=\"https://link.zhihu.com/?target=https%3A//www.behance.net/gallery/20965343/Xmas-icon-set\" class=\" wrap external\" target=\"_blank\" rel=\"nofollow noreferrer\">Dmitriy Miroliubov<i class=\"icon-external\"></i></a></strong> \u8bbe\u8ba1\u7684\u56fe\u6807\uff0c\u5229\u7528 CSS \u4e0e JS \u5b9e\u73b0\u4e86\u5723\u8bde\u52a8\u753b\u6548\u679c\u3002\u662f\u4e0d\u662f\u5f88\u53ef\u7231\u5462\uff1f<br><blockquote><p><strong>\u9879\u76ee\u5730\u5740\uff1a<a href=\"https://link.zhihu.com/?target=http%3A//codepen.io/chrisgannon/pen/QGqMGE\" class=\" wrap external\" target=\"_blank\" rel=\"nofollow noreferrer\">\u4f20\u9001\u95e8<i class=\"icon-external\"></i></a></strong></p></blockquote><h2><b>9. <a href=\"https://link.zhihu.com/?target=http%3A//codepen.io/akhil_001/pen/vyWGOE\" class=\" wrap external\" target=\"_blank\" rel=\"nofollow noreferrer\">\u5367\u63a8<i class=\"icon-external\"></i></a></b></h2><p>\u4f5c\u8005\uff1aAkhil Sai Ram</p><img src=\"https://pic1.zhimg.com/v2-3ec9bd98fcea490e1e019f30f7a18234_b.jpg\" data-rawwidth=\"739\" data-rawheight=\"400\" class=\"origin_image zh-lightbox-thumb\" width=\"739\" data-original=\"https://pic1.zhimg.com/v2-3ec9bd98fcea490e1e019f30f7a18234_r.jpg\">\u7eaf CSS \u5b9e\u73b0\u7684\u5367\u63a8\u6548\u679c\u3002\u5c0f\u72ee\u53ea\u60f3\u8bf4\uff0c\u8fd8\u86ee\u903c\u771f\u7684\u561b\uff01<br><blockquote><p><strong>\u9879\u76ee\u5730\u5740\uff1a<a href=\"https://link.zhihu.com/?target=http%3A//codepen.io/akhil_001/pen/vyWGOE\" class=\" wrap external\" target=\"_blank\" rel=\"nofollow noreferrer\">\u4f20\u9001\u95e8<i class=\"icon-external\"></i></a></strong></p></blockquote><h2><b>10. <a href=\"https://link.zhihu.com/?target=http%3A//codepen.io/poziomq/pen/woeqKo\" class=\" wrap external\" target=\"_blank\" rel=\"nofollow noreferrer\">tancerzyk CSS<i class=\"icon-external\"></i></a></b></h2><p>\u4f5c\u8005\uff1aqpoziomek</p><img src=\"https://pic1.zhimg.com/v2-45dc663617200160f8d5c4ef455ea828_b.jpg\" data-rawwidth=\"864\" data-rawheight=\"462\" class=\"origin_image zh-lightbox-thumb\" width=\"864\" data-original=\"https://pic1.zhimg.com/v2-45dc663617200160f8d5c4ef455ea828_r.jpg\">\u7eaf CSS \u5b9e\u73b0\u5feb\u4e50\u7684\u5a74\u513f\uff0c\u53c2\u7167\u4e86\u7531<strong><a href=\"https://link.zhihu.com/?target=https%3A//dribbble.com/shots/2485177-Dancing\" class=\" wrap external\" target=\"_blank\" rel=\"nofollow noreferrer\">Eran Mendel<i class=\"icon-external\"></i></a></strong>\u8bbe\u8ba1\u7684\u821e\u8e48\u56fe\u7247\u3002<br><blockquote><p><strong>\u9879\u76ee\u5730\u5740\uff1a<a href=\"https://link.zhihu.com/?target=http%3A//codepen.io/poziomq/pen/woeqKo\" class=\" wrap external\" target=\"_blank\" rel=\"nofollow noreferrer\">\u4f20\u9001\u95e8<i class=\"icon-external\"></i></a></strong></p></blockquote><h2><b>11. <a href=\"https://link.zhihu.com/?target=http%3A//codepen.io/JTBennett/pen/vyJmBK\" class=\" wrap external\" target=\"_blank\" rel=\"nofollow noreferrer\">\u5409\u4ed6\u8c03\u97f3\u5668<i class=\"icon-external\"></i></a></b></h2><p>\u4f5c\u8005\uff1aJoel T Bennett</p><img src=\"https://pic2.zhimg.com/v2-5e442296d0672b490c1f2655ae7449a1_b.jpg\" data-rawwidth=\"373\" data-rawheight=\"499\" class=\"content_image\" width=\"373\">\u5229\u7528 CSS+JS \u4e3a <strong><a href=\"https://link.zhihu.com/?target=http%3A//www.jianshu.com/p/electricherald.com\" class=\" wrap external\" target=\"_blank\" rel=\"nofollow noreferrer\">electricherald.com<i class=\"icon-external\"></i></a></strong> \u7f51\u7ad9\u5b9e\u73b0\u7684\u5409\u4ed6\u8c03\u97f3\u5668\u3002\u70b9\u51fb\u7434\u5f26\u53ef\u4ee5\u53d1\u51fa\u58f0\u97f3\u54e6\uff0c\u7b80\u76f4\u592a\u9177\u4e86\uff01<br><blockquote><p><strong>\u9879\u76ee\u5730\u5740\uff1a<a href=\"https://link.zhihu.com/?target=http%3A//codepen.io/JTBennett/pen/vyJmBK\" class=\" wrap external\" target=\"_blank\" rel=\"nofollow noreferrer\">\u4f20\u9001\u95e8<i class=\"icon-external\"></i></a></strong></p></blockquote><h2><b>12. <a href=\"https://link.zhihu.com/?target=http%3A//codepen.io/chriscoyier/pen/eBRRLe\" class=\" wrap external\" target=\"_blank\" rel=\"nofollow noreferrer\">The Wave<i class=\"icon-external\"></i></a></b></h2><p>\u4f5c\u8005\uff1aChris Coyier</p><img src=\"https://pic4.zhimg.com/v2-9eb98c66ed6b7416247653fd745f32fb_b.jpg\" data-rawwidth=\"640\" data-rawheight=\"401\" class=\"origin_image zh-lightbox-thumb\" width=\"640\" data-original=\"https://pic4.zhimg.com/v2-9eb98c66ed6b7416247653fd745f32fb_r.jpg\">\u7eaf CSS \u5b9e\u73b0\u7684\u9707\u52a8\u6548\u679c\u3002<br><blockquote><p><strong>\u9879\u76ee\u5730\u5740\uff1a<a href=\"https://link.zhihu.com/?target=http%3A//codepen.io/chriscoyier/pen/eBRRLe\" class=\" wrap external\" target=\"_blank\" rel=\"nofollow noreferrer\">\u4f20\u9001\u95e8<i class=\"icon-external\"></i></a></strong></p></blockquote><p>\u4ee5\u4e0a 12 \u4e2a\u524d\u7aef\u9879\u76ee\u662f\u4e0d\u662f\u6709\u8da3\u5462\uff1f\u5f53\u7136\uff0c\u5728CodePen\u4e0a\uff0c\u8fd9\u4e9b\u53ea\u662f\u51b0\u5c71\u4e00\u89d2\uff0c\u66f4\u591a\u7684\u60ca\u559c\u503c\u5f97\u6211\u4eec\u53bb\u4e0d\u65ad\u5730\u5b66\u4e60\u4e0e\u6316\u6398\u3002</p><p>\u524d\u7aef\u5f00\u53d1\u8005\u4eec\uff0c\u5229\u7528\u4f60\u624b\u4e2d\u7684\u6b66\u5668\u521b\u9020\u51fa\u65b0\u7684\u60ca\u559c\u5427\uff01</p><p>\u5982\u679c\u89c9\u5f97\u6587\u7ae0\u4e0d\u9519\uff0c\u4e0d\u59a8\u70b9\u4e2a\u8d5e\u3002^_^</p><p><strong>\u6ce8\uff1a</strong>\u672c\u6587\u4e3a\u539f\u521b\u6587\u7ae0\uff0c\u8f6c\u8f7d\u70e6\u8bf7\u6ce8\u660e\u51fa\u5904\u3002\u8c22\u8c22\u5408\u4f5c\uff01</p><blockquote><p><strong>\u4f5c\u8005\uff1a<a href=\"https://link.zhihu.com/?target=http%3A//weibo.com/itlion114/\" class=\" wrap external\" target=\"_blank\" rel=\"nofollow noreferrer\">IT\u7a0b\u5e8f\u72ee<i class=\"icon-external\"></i></a></strong><br><strong>\u6587\u7ae0\u6e90\u81ea\uff1a<a href=\"https://link.zhihu.com/?target=http%3A//www.jianshu.com/p/788babdf7e54\" class=\" external\" target=\"_blank\" rel=\"nofollow noreferrer\"><span class=\"invisible\">http://www.</span><span class=\"visible\">jianshu.com/p/788babdf7</span><span class=\"invisible\">e54</span><span class=\"ellipsis\"></span><i class=\"icon-external\"></i></a></strong></p></blockquote>", "state": "published", "sourceUrl": "", "pageCommentsCount": 0, "canComment": false, "snapshotUrl": "", "slug": 24153835, "publishedTime": "2016-12-04T09:40:13+08:00", "url": "/p/24153835", "title": "\u8d85\u8d5e\uff01CodePen \u4e0a\u6700\u65b0\u7684 12 \u4e2a\u70ed\u95e8\u524d\u7aef\u9879\u76ee", "summary": "\u5bf9\u4e8e\u524d\u7aef\u5f00\u53d1\u8005\u800c\u8a00\uff0c<strong><a href=\"http://codepen.io/\" data-editable=\"true\" data-title=\"CodePen\">CodePen</a></strong>\u4e00\u76f4\u662f\u76db\u4ea7\u60f3\u6cd5\u4e0e\u521b\u610f\u7684\u5723\u5730\u3002\u5b83\u80fd\u591f\u4ee5\u5728\u7ebf\u5f62\u5f0f\uff0c\u5c06\u524d\u7aef\u4ee3\u7801\u7f16\u8f91\u4e0e\u5c55\u793a\u3002\u540c\u65f6\uff0c\u4f60\u8fd8\u53ef\u4ee5\u4e0e\u5168\u7403\u4f17\u591a\u7684\u5f00\u53d1\u8005\u4eec\u4ea4\u6d41\u60f3\u6cd5\u3001\u5206\u4eab\u4f60\u7684\u4f5c\u54c1\u3002\u4eca\u5929\uff0c\u7a0b\u5c0f\u72ee\u5728 CodePen \u4e0a\u4e5f\u4e13\u95e8\u6311\u9009\u4e86\u8fd1\u671f\u70ed\u95e8\u7684\u524d\u7aef\u9879\u76ee\uff0c\u4e0e\u524d\u7aefer\u3001\u8bbe\u8ba1\u5e08\u4eec\u5206\u4eab\u3002\u76f8\u4fe1\u2026", "reviewingCommentsCount": 0, "meta": {"previous": null, "next": null}, "commentPermission": "anyone", "commentsCount": 0, "likesCount": 0}, "next": {"isTitleImageFullScreen": false, "rating": "none", "titleImage": "https://pic2.zhimg.com/v2-821c171d4d8dcc575f3d528d096bdce5_r.jpg", "links": {"comments": "/api/posts/24197775/comments"}, "topics": [{"url": "https://www.zhihu.com/topic/19551557", "id": "19551557", "name": "\u8bbe\u8ba1"}, {"url": "https://www.zhihu.com/topic/19704899", "id": "19704899", "name": "UI \u5f00\u53d1"}, {"url": "https://www.zhihu.com/topic/19552212", "id": "19552212", "name": "\u8bbe\u8ba1\u5e08"}], "href": "/api/posts/24197775", "excerptTitle": "", "author": {"profileUrl": "https://www.zhihu.com/people/itlion114", "bio": "\u7f16\u7a0b\u5b66\u4e60\u5206\u4eab\u8005\uff0c\u4e13\u6ce8\u524d\u7aef\u3002", "hash": "378ab035ef835f51e537548d6b73900f", "uid": 784321885851762688, "isOrg": false, "description": "\u7f16\u7a0b\u5b66\u4e60\u5206\u4eab\u8005\uff0c\u4e13\u6ce8\u524d\u7aef\u3002", "isOrgWhiteList": false, "slug": "itlion114", "avatar": {"id": "v2-3bdbf34128d395dd4e1ebe21a56578cd", "template": "https://pic2.zhimg.com/{id}_{size}.jpg"}, "name": "IT\u7a0b\u5e8f\u72ee"}, "column": {"slug": "itlion114", "name": "IT\u6280\u672f\u5206\u4eab"}, "content": "<p>\u5728\u8fd9\u7bc7\u6587\u7ae0\u4e2d\uff0c\u6211\u4eec\u5c06\u4e0e\u5927\u5bb6\u5206\u4eab\u4e00\u4e9b\u4e13\u4e3a\u8bbe\u8ba1\u5e08\u6253\u9020\u7684\u70ed\u95e8\u5de5\u5177\u3002\u5b83\u4eec\u53ef\u4ee5\u6709\u6548\u7684\u5e2e\u52a9\u4f60\u5236\u4f5c\u4ea4\u4e92\u539f\u578b\uff0c\u534f\u52a9\u4f60\u8fdb\u884c\u7f51\u7ad9\u7684\u8bbe\u8ba1\uff0c\u5e76\u4e3a\u4f60\u63d0\u4f9b\u6536\u96c6\u3001\u7ba1\u7406\u8bbe\u8ba1\u7d20\u6750\u7684\u573a\u6240\u3002</p><p>\u90a3\u4e48\uff0c\u8fd9\u4e9b\u5b9e\u7528\u7684\u5de5\u5177\uff0c\u4f60\u53c8\u5c82\u80fd\u9519\u8fc7\u5462\uff01Have Fun\uff01</p><p><b>1. <a href=\"https://link.zhihu.com/?target=http%3A//t.cn/RfHTHS8\" class=\" wrap external\" target=\"_blank\" rel=\"nofollow noreferrer\">Napkin iphone\u7248<i class=\"icon-external\"></i></a></b></p><img src=\"https://pic2.zhimg.com/v2-91b38e72fef9ae4e52b7118de029005d_b.png\" data-rawwidth=\"800\" data-rawheight=\"381\" class=\"origin_image zh-lightbox-thumb\" width=\"800\" data-original=\"https://pic2.zhimg.com/v2-91b38e72fef9ae4e52b7118de029005d_r.png\"><p>Napkin \u662f\u4e00\u6b3e\u76f4\u63a5\u5728 iPhone \u4e0a\u5c31\u53ef\u4ee5\u5b8c\u6210 APP \u4ea4\u4e92\u8bbe\u8ba1\u7684\u8f6f\u4ef6\u3002\u5b83\u62e5\u6709\u4e09\u4e2a\u4e3b\u8981\u5de5\u5177\uff1a\u56fe\u5c42\u63a7\u4ef6\u3001\u753b\u677f\u5de5\u5177\u4ee5\u53ca\u7f16\u8f91\u63a7\u4ef6\uff0c\u8ba9\u4f60\u5728\u624b\u673a\u4e0a\u5c31\u80fd\u8f7b\u677e\u7684\u5b8c\u6210\u521b\u610f\u8bbe\u8ba1\u3002\u662f\u4e0d\u662f\u5f88\u65b9\u4fbf\u5462\uff1f<br></p><p><b>2. <a href=\"https://link.zhihu.com/?target=http%3A//www.atomic.io/\" class=\" wrap external\" target=\"_blank\" rel=\"nofollow noreferrer\">Atomic<i class=\"icon-external\"></i></a></b></p><img src=\"https://pic4.zhimg.com/v2-26a9fe0314c9fb8f4614ad4dea906a17_b.png\" data-rawwidth=\"800\" data-rawheight=\"499\" class=\"origin_image zh-lightbox-thumb\" width=\"800\" data-original=\"https://pic4.zhimg.com/v2-26a9fe0314c9fb8f4614ad4dea906a17_r.png\"><p>\u65e0\u8bba\u662f\u5728\u7b80\u5355\u7684\u4ea4\u4e92\u4e0a\uff0c\u6216\u662f\u8d2f\u7a7f\u5728\u6574\u4e2a\u4ea7\u54c1\u7684\u7814\u53d1\u4e2d\uff0cAtomic \u90fd\u53ef\u4ee5\u5e2e\u52a9\u4f60\u5feb\u901f\u521b\u5efa\u5207\u5b9e\u7684\u539f\u578b\u3002<br></p><p><b>3. <a href=\"https://link.zhihu.com/?target=http%3A//www.wake.io/\" class=\" wrap external\" target=\"_blank\" rel=\"nofollow noreferrer\">Wake<i class=\"icon-external\"></i></a></b></p><p><img src=\"https://pic2.zhimg.com/v2-d5ddd45302fce5a2f046558a82aaec7d_b.png\" data-rawwidth=\"800\" data-rawheight=\"690\" class=\"origin_image zh-lightbox-thumb\" width=\"800\" data-original=\"https://pic2.zhimg.com/v2-d5ddd45302fce5a2f046558a82aaec7d_r.png\">Wake \u662f\u4e00\u6b3e\u9762\u5411\u521b\u610f\u8bbe\u8ba1\u56e2\u961f\u7684\u534f\u4f5c\u5de5\u5177\u3002\u5b83\u80fd\u8ba9\u4f60\u5feb\u901f\u5730\u4e86\u89e3\u56e2\u961f\u7684\u521b\u610f\uff0c\u5728\u4e0d\u6253\u65ad\u4f60\u5de5\u4f5c\u7684\u60c5\u51b5\u4e0b\uff0c\u4e0e\u56e2\u961f\u6210\u5458\u5171\u4eab\u4f60\u7684\u5de5\u4f5c\u6d41\u7a0b\uff0c\u540c\u65f6 Wake \u8fd8\u53ef\u4ee5\u8ddf\u4e00\u4e9b\u8bbe\u8ba1\u5de5\u5177\uff08Sketch\u3001Photoshop \u6216\u8005 Illustrator\uff09\u76f4\u63a5\u5bf9\u63a5\uff0c\u65b9\u4fbf\u56e2\u961f\u5229\u7528\u5df2\u6709\u8bbe\u8ba1\u5de5\u5177\u3002</p><p><b>4. <a href=\"https://link.zhihu.com/?target=http%3A//www.ceros.com/\" class=\" wrap external\" target=\"_blank\" rel=\"nofollow noreferrer\">Cereos<i class=\"icon-external\"></i></a></b></p><p><img src=\"https://pic4.zhimg.com/v2-cb67810de068e0a12d9cdeb5baf4a0eb_b.png\" data-rawwidth=\"800\" data-rawheight=\"400\" class=\"origin_image zh-lightbox-thumb\" width=\"800\" data-original=\"https://pic4.zhimg.com/v2-cb67810de068e0a12d9cdeb5baf4a0eb_r.png\">\u4e13\u4e3a\u8425\u9500\u4eba\u5458\u548c\u8bbe\u8ba1\u5e08\u6253\u9020\u7684\u4e00\u6b3e\u5f3a\u5927\u7684\u4ea4\u4e92\u5f0f\u5185\u5bb9\u521b\u4f5c\u8f6f\u4ef6\u3002</p><p>\u4f60\u53ef\u4ee5\u7528\u5b83\u521b\u4f5c\u51fa\u591a\u79cd\u5f62\u5f0f\u7684\u5185\u5bb9\u3002\u4f8b\u5982\uff0c\u4e92\u52a8\u7684\u4fe1\u606f\u56fe\u8868\u3001\u9002\u5408\u79fb\u52a8\u8bbe\u5907\u7684\u7535\u5b50\u4e66\u3001\u591a\u9875\u7684\u72ec\u7acb\u7f51\u7ad9\u4ee5\u53ca\u6570\u5b57\u6742\u5fd7\u7b49\u3002\u6765 Enjoy \u5427\uff01</p><p><b>5. <a href=\"https://link.zhihu.com/?target=http%3A//www.uxpin.com/\" class=\" wrap external\" target=\"_blank\" rel=\"nofollow noreferrer\">UX Pin<i class=\"icon-external\"></i></a></b></p><p><img src=\"https://pic1.zhimg.com/v2-19233a9e437493fddc55e0c93c8b5964_b.png\" data-rawwidth=\"800\" data-rawheight=\"391\" class=\"origin_image zh-lightbox-thumb\" width=\"800\" data-original=\"https://pic1.zhimg.com/v2-19233a9e437493fddc55e0c93c8b5964_r.png\">UXPin \u662f DeSmart \u56e2\u961f\u5f00\u53d1\u7684\u4e00\u4e2a\u7b80\u6613\u5feb\u901f\u7684\u5b9e\u4f53\u6a21\u578b\u548c\u5728\u7ebf\u53ef\u70b9\u51fb\u539f\u578b\u521b\u4f5c\u5de5\u5177\u3002\u5728\u56db\u5927\u529f\u80fd\uff08\u5feb\u901f\u6784\u5efa\u7ebf\u6846\u548c\u539f\u578b\u3001\u53ef\u6269\u5c55\u7684\u8bbe\u8ba1\u7cfb\u7edf\u3001\u4fbf\u4e8e\u9879\u76ee\u7684\u534f\u4f5c\u4e0e\u9a8c\u8bc1\u3001\u9879\u76ee\u7684\u8ddf\u8e2a\u4e0e\u5f00\u53d1\u4eba\u5458\u7684\u5207\u6362\uff09\u7684\u652f\u6301\u4e0b\uff0c\u5b83\u53ef\u4ee5\u5e2e\u52a9 UX \u8bbe\u8ba1\u4eba\u5458\u4ece\u5934\u6784\u5efa\u4e00\u4e2a\u51fa\u8272\u7684\u539f\u578b\u3002</p><p><b>6. <a href=\"https://link.zhihu.com/?target=http%3A//blocsapp.com/\" class=\" wrap external\" target=\"_blank\" rel=\"nofollow noreferrer\">Blocs<i class=\"icon-external\"></i></a></b></p><p><img src=\"https://pic3.zhimg.com/v2-88429bb9a51ae565182b043800d33aa6_b.png\" data-rawwidth=\"800\" data-rawheight=\"517\" class=\"origin_image zh-lightbox-thumb\" width=\"800\" data-original=\"https://pic3.zhimg.com/v2-88429bb9a51ae565182b043800d33aa6_r.png\">Blocs \u662f\u4e00\u4e2a\u5feb\u901f\uff0c\u6613\u4e8e\u4f7f\u7528\u4e14\u529f\u80fd\u5f3a\u5927\u7684\u89c6\u89c9\u7f51\u9875\u8bbe\u8ba1\u5de5\u5177\u3002\u5b83\u667a\u80fd\u5316\u7684\u8bbe\u8ba1\uff0c\u53ef\u4ee5\u5e2e\u52a9\u521d\u5b66\u8005\u4ee5\u53ca\u638c\u63e1\u7f51\u9875\u8bbe\u8ba1\u7684\u670b\u53cb\u4eec\u521b\u5efa\u51fa\u6f02\u4eae\u3001\u65f6\u5c1a\u7684\u7f51\u7ad9\uff0c\u800c\u65e0\u9700\u7f16\u5199\u4ee3\u7801\u3002</p><p><b>7.<a href=\"https://link.zhihu.com/?target=http%3A//www.fontreach.com/\" class=\" wrap external\" target=\"_blank\" rel=\"nofollow noreferrer\"> Font Reach<i class=\"icon-external\"></i></a></b></p><p><img src=\"https://pic1.zhimg.com/v2-b646bb7b08485f47b6a72adc4d6f5ce4_b.png\" data-rawwidth=\"800\" data-rawheight=\"555\" class=\"origin_image zh-lightbox-thumb\" width=\"800\" data-original=\"https://pic1.zhimg.com/v2-b646bb7b08485f47b6a72adc4d6f5ce4_r.png\">\u60f3\u77e5\u9053 Facebook\u3001Twitter\u3001Google \u90fd\u5728\u4f7f\u7528\u54ea\u4e9b\u5b57\u4f53\u5417\uff1f\u60f3\u77e5\u9053\u76ee\u524d\u6700\u6d41\u884c\u7684\u7f51\u9875\u5b57\u4f53\uff1f Font Reach \u5e2e\u4f60\u76f4\u63a5\u641e\u5b9a\u3002</p><p>\u5b83\u53ef\u4ee5\u8ba9\u4f60\u5feb\u901f\u67e5\u8be2\u67d0\u4e2a\u5b57\u4f53\u88ab\u7528\u4e8e\u54ea\u4e00\u4e9b\u7f51\u7ad9\uff0c\u8fd8\u53ef\u4ee5\u663e\u793a\u6700\u70ed\u95e8\u7684\u7f51\u9875\u5b57\u4f53\u6392\u884c\u699c\uff0c\u8ba9\u4f60\u77e5\u9053\u76ee\u524d\u6700\u6d41\u884c\u7684\u7f51\u9875\u5b57\u4f53\u3002</p><p>\u662f\u4e0d\u662f\u5f88\u795e\u5947\u5462\uff0c\u5feb\u6765\u8bd5\u8bd5\u5427\uff01</p><p><b>8. <a href=\"https://link.zhihu.com/?target=http%3A//www.lingoapp.com/\" class=\" wrap external\" target=\"_blank\" rel=\"nofollow noreferrer\">Lingo<i class=\"icon-external\"></i></a></b></p><p><img src=\"https://pic3.zhimg.com/v2-024aa682f3d60ffa6125b5d0a05f8442_b.png\" data-rawwidth=\"800\" data-rawheight=\"635\" class=\"origin_image zh-lightbox-thumb\" width=\"800\" data-original=\"https://pic3.zhimg.com/v2-024aa682f3d60ffa6125b5d0a05f8442_r.png\">\u8fd8\u5728\u53d1\u6101\u8bbe\u8ba1\u56e2\u961f\u95f4\u4f4e\u6548\u7387\u7684\u529e\u516c\u534f\u4f5c\u5417\uff1fLingo \u7684\u51fa\u73b0\uff0c\u8ba9\u4f60\u7684\u56e2\u961f\u4ece\u6b64\u65e0\u5fe7\u3002</p><p>\u4f60\u53ea\u9700\u8981\u7b80\u5355\u5730\u5c06\u53ef\u89c6\u5316\u8d44\u6e90\uff0c\u62d6\u653e\u5230 Lingo \u4e2d\uff0c\u4fbf\u53ef\u4ee5\u8f7b\u677e\u5730\u6784\u5efa\u4e00\u4e2a\u53ef\u89c6\u5316\u8d44\u6e90\u5e93\u3002\u6536\u96c6\uff0c\u6574\u7406\u4e0e\u4f7f\u7528\u4f60\u7684\u53ef\u89c6\u5316\u8d44\u6e90\u5c06\u53d8\u5f97\u66f4\u52a0\u5feb\u6377\u3002</p><p>\u540c\u65f6\uff0c\u4f60\u8fd8\u53ef\u4ee5\u5c06\u8d44\u6e90\u5e93\u5171\u4eab\u7ed9\u6574\u4e2a\u56e2\u961f\u3002\u8282\u7ea6\u56e2\u961f\u6210\u5458\u67e5\u627e\u7d20\u6750\u7684\u65f6\u95f4\uff0c\u8ba9\u56e2\u961f\u66f4\u9ad8\u6548\u5730\u7ba1\u7406\u4e0e\u5171\u4eab\u53ef\u89c6\u5316\u8d44\u6e90\u3002</p><p><b>9. <a href=\"https://link.zhihu.com/?target=http%3A//webflow.com/\" class=\" wrap external\" target=\"_blank\" rel=\"nofollow noreferrer\">WebFlow<i class=\"icon-external\"></i></a></b></p><p><img src=\"https://pic3.zhimg.com/v2-0711ca822047b868723faf5ecb56c7fe_b.png\" data-rawwidth=\"800\" data-rawheight=\"689\" class=\"origin_image zh-lightbox-thumb\" width=\"800\" data-original=\"https://pic3.zhimg.com/v2-0711ca822047b868723faf5ecb56c7fe_r.png\">\u4e00\u4e2a\u50bb\u74dc\u5f0f\u7f51\u9875\u8bbe\u8ba1\u5236\u4f5c\u5e73\u53f0\u3002\u4f60\u53ea\u9700\u8981\u5229\u7528\u4e13\u4e1a\u7684\u62d6\u653e\u5de5\u5177\uff0c\u4fbf\u53ef\u4ee5\u5728\u65e0\u9700\u7f16\u7a0b\u7684\u60c5\u51b5\u4e0b\uff0c\u5b9e\u73b0\u54cd\u5e94\u5f0f\u7f51\u9875\u8bbe\u8ba1\u4e0e\u5f00\u53d1\u3002</p><p>\u5b83\u8bd5\u56fe\u5e2e\u52a9\u90a3\u4e9b\u6beb\u65e0\u7f16\u7a0b\u6982\u5ff5\u7684\u8bbe\u8ba1\u5e08\u5c06\u81ea\u5df1\u7684\u521b\u610f\u53d1\u6325\u51fa\u6765\u3002\u9664\u4e86\u4ece\u8bbe\u8ba1\u5230 CSS \u6784\u67b6\uff0c\u751a\u81f3\u4f60\u53ef\u4ee5\u5728\u7ebf\u76f4\u63a5\u5c06\u5efa\u597d\u7684\u7f51\u9875\u53d1\u5e03\uff0c\u800c\u4e0d\u9700\u8981\u5bfc\u51fa\u4ee3\u7801\u5230\u5176\u4ed6\u53d1\u5e03\u5de5\u5177\u4e0a\u3002</p><p><b>10. <a href=\"https://link.zhihu.com/?target=http%3A//stocky.pro/\" class=\" wrap external\" target=\"_blank\" rel=\"nofollow noreferrer\">Stocky<i class=\"icon-external\"></i></a></b></p><img src=\"https://pic4.zhimg.com/v2-cd5886d23944616de7738af2370a04d3_b.png\" data-rawwidth=\"800\" data-rawheight=\"421\" class=\"origin_image zh-lightbox-thumb\" width=\"800\" data-original=\"https://pic4.zhimg.com/v2-cd5886d23944616de7738af2370a04d3_r.png\"><p>Stocky \u4e0d\u4ec5\u662f\u4e00\u4e2a\u514d\u8d39\u7684\u56fe\u5e93\uff0c\u5b83\u8fd8\u96c6\u5408\u4e8e\u76f8\u7247\u3001\u5f71\u7247\u3001\u97f3\u4e50\u4ee5\u53ca\u56fe\u6807\u3002\u57fa\u672c\u4e0a\uff0c\u4f60\u53ef\u4ee5\u5728\u8fd9\u91cc\u627e\u5230\u4f60\u60f3\u8981\u7684\u6240\u6709\u7c7b\u578b\u7684\u7d20\u6750\u3002\u800c\u7f51\u7ad9\u4e5f\u65e0\u987b\u6ce8\u518c\u767b\u5165\uff0c\u5373\u53ef\u4e0b\u8f7d\u3002<br></p><p>Stocky \u7684\u6240\u6709\u5185\u5bb9\u7686\u53ef\u7528\u4e8e\u4e2a\u4eba\u6216\u5546\u4e1a\u7528\u9014\u3002</p><p><b>11. <a href=\"https://link.zhihu.com/?target=http%3A//www.iconfinder.com/\" class=\" wrap external\" target=\"_blank\" rel=\"nofollow noreferrer\">IconFinder<i class=\"icon-external\"></i></a></b></p><p><img src=\"https://pic1.zhimg.com/v2-d4b6ec92dafac257f9f912a82b1739c8_b.png\" data-rawwidth=\"800\" data-rawheight=\"800\" class=\"origin_image zh-lightbox-thumb\" width=\"800\" data-original=\"https://pic1.zhimg.com/v2-d4b6ec92dafac257f9f912a82b1739c8_r.png\">IconFinder \u662f\u4e00\u4e2a ICON \u7d20\u6750\u7ad9\u70b9\uff0c\u5b83\u4e3a\u6570\u767e\u4e07\u8bbe\u8ba1\u5e08\u548c\u5f00\u53d1\u4eba\u5458\u63d0\u4f9b\u7f8e\u4e3d\u7684\u56fe\u6807\u3002</p><p>\u4f60\u53ea\u9700\u8981\u5728\u7f51\u7ad9\u7684\u8f93\u5165\u6846\u4e2d\u8f93\u5165 ICON \u56fe\u6807\u7684\u5173\u952e\u5b57\uff0c\u4fbf\u53ef\u8fdb\u5165\u5230\u641c\u7d22\u5185\u9875\u91cc\uff0c\u6839\u636e\u4e2a\u4eba\u7684\u9700\u6c42\uff08\u56fe\u6807\u683c\u5f0f\u3001\u4ef7\u683c\u3001\u8bb8\u53ef\u7c7b\u578b\u3001\u56fe\u6807\u5c3a\u5bf8\u7b49\u8981\u7d20\uff09\u6765\u9009\u62e9\u4f60\u559c\u6b22\u7684\u56fe\u6807\u3002</p><p>\u5f53\u7136\uff0c\u56fe\u6807\u7684\u7c7b\u578b\u4e5f\u662f\u591a\u6837\u7684\uff0c\u4f9b\u4f60\u4efb\u610f\u9009\u62e9\u3002\u5982\u679c\u5904\u4e8e\u5546\u4e1a\u76ee\u7684\uff0c\u4f60\u53ef\u4ee5\u8d2d\u4e70\u5b83\u4eec\u7684\u670d\u52a1\uff0c\u800c\u4e0d\u7528\u62c5\u5fc3\u7248\u6743\u95ee\u9898\u3002</p><p>\u4ee5\u4e0a\u5c31\u662f\u672c\u6587\u6240\u6709\u7684\u5206\u4eab\uff0c\u5e0c\u671b\u4f60\u80fd\u591f\u627e\u5230\u9002\u5408\u4f60\u7684\u5de5\u5177\u3002</p><p>\u5982\u679c\u89c9\u5f97\u6587\u7ae0\u4e0d\u9519\uff0c\u4e0d\u59a8\u70b9\u4e2a\u8d5e\u3002^_^</p><p><b>\u6ce8\uff1a</b></p><ol><li>\u672c\u6587\u5728\u7ffb\u8bd1\u7684\u57fa\u7840\u4e0a\uff0c\u8865\u5145\u4e86\u8bd1\u8005\u5bf9\u4e00\u4e9b\u5de5\u5177\u7684\u7406\u89e3\u3002\u6216\u8bb8\u80fd\u5bf9\u4f60\u8d77\u5230\u53c2\u8003\u4e0e\u5e2e\u52a9\u7684\u4f5c\u7528\uff1b</li><li>\u6709\u4e9b\u5de5\u5177\u6216\u8bb8\u9700\u8981\u4f60\u81ea\u5907\u68af\u5b50\uff1b</li><li>\u672c\u6587\u7248\u6743\u5f52\u539f\u4f5c\u8005\u6240\u6709\u3002\u5982\u9700\u8f6c\u8f7d\u8bd1\u6587\uff0c\u70e6\u8bf7\u6ce8\u660e\u51fa\u5904\uff0c\u8c22\u8c22\uff01</li></ol><blockquote><b>\u82f1\u6587\u539f\u6587\uff1a<a href=\"https://link.zhihu.com/?target=http%3A//t.cn/RfYjN4G\" class=\" wrap external\" target=\"_blank\" rel=\"nofollow noreferrer\">Top Trending Tools for Designers<i class=\"icon-external\"></i></a><br>\u4f5c\u8005\uff1a<a href=\"https://link.zhihu.com/?target=https%3A//repick.co/%3Fref%3Dblog.repick.co\" class=\" wrap external\" target=\"_blank\" rel=\"nofollow noreferrer\">repick.co<i class=\"icon-external\"></i></a><br>\u8bd1\u8005\uff1a<a href=\"https://link.zhihu.com/?target=http%3A//weibo.com/itlion114/\" class=\" wrap external\" target=\"_blank\" rel=\"nofollow noreferrer\">IT\u7a0b\u5e8f\u72ee<i class=\"icon-external\"></i></a><br>\u8bd1\u6587\u6e90\u81ea\uff1a<a href=\"https://link.zhihu.com/?target=http%3A//www.jianshu.com/p/f5360f0e14c8\" class=\" wrap external\" target=\"_blank\" rel=\"nofollow noreferrer\">11 \u6b3e\u4e13\u4e3a\u8bbe\u8ba1\u5e08\u6253\u9020\u7684\u70ed\u95e8\u5de5\u5177<i class=\"icon-external\"></i></a></b></blockquote>", "state": "published", "sourceUrl": "", "pageCommentsCount": 0, "canComment": false, "snapshotUrl": "", "slug": 24197775, "publishedTime": "2016-12-06T07:58:24+08:00", "url": "/p/24197775", "title": "11 \u6b3e\u4e13\u4e3a\u8bbe\u8ba1\u5e08\u6253\u9020\u7684\u70ed\u95e8\u5de5\u5177", "summary": "\u5728\u8fd9\u7bc7\u6587\u7ae0\u4e2d\uff0c\u6211\u4eec\u5c06\u4e0e\u5927\u5bb6\u5206\u4eab\u4e00\u4e9b\u4e13\u4e3a\u8bbe\u8ba1\u5e08\u6253\u9020\u7684\u70ed\u95e8\u5de5\u5177\u3002\u5b83\u4eec\u53ef\u4ee5\u6709\u6548\u7684\u5e2e\u52a9\u4f60\u5236\u4f5c\u4ea4\u4e92\u539f\u578b\uff0c\u534f\u52a9\u4f60\u8fdb\u884c\u7f51\u7ad9\u7684\u8bbe\u8ba1\uff0c\u5e76\u4e3a\u4f60\u63d0\u4f9b\u6536\u96c6\u3001\u7ba1\u7406\u8bbe\u8ba1\u7d20\u6750\u7684\u573a\u6240\u3002\u90a3\u4e48\uff0c\u8fd9\u4e9b\u5b9e\u7528\u7684\u5de5\u5177\uff0c\u4f60\u53c8\u5c82\u80fd\u9519\u8fc7\u5462\uff01Have Fun\uff01<b>1. <a href=\"http://t.cn/RfHTHS8\" data-editable=\"true\" data-title=\"Napkin iphone\u7248\">Napkin iphone\u7248</a></b>Napkin \u662f\u4e00\u6b3e\u76f4\u63a5\u5728 \u2026", "reviewingCommentsCount": 0, "meta": {"previous": null, "next": null}, "commentPermission": "anyone", "commentsCount": 0, "likesCount": 0}}, "commentPermission": "anyone", "commentsCount": 12, "likesCount": 296},ensure_ascii=False)
    print (a)

    unittest.main()
